<template>
  <div>
    <div class="nav-body">
      <!-- 侧边导航 -->
<!--      <div class="nav-side" ref="navSide">-->
<!--        <ul>-->
<!--          <li @mouseenter="showDetail(1)" @mouseleave="hideDetail(1)">-->
<!--            <span class="nav-side-item">游戏本分区</span>-->
<!--          </li>-->
<!--          <li @mouseenter="showDetail(2)" @mouseleave="hideDetail(2)">-->
<!--            <span class="nav-side-item">便携本分区</span>-->
<!--          </li>-->
<!--          <li @mouseenter="showDetail(3)" @mouseleave="hideDetail(3)">-->
<!--            <span class="nav-side-item">轻薄本分区</span>-->
<!--          </li>-->
<!--        </ul>-->
<!--      </div>-->
      <div class="nav-content">
        <!-- 幻灯片 -->
        <div>
          <Carousel autoplay loop>
            <CarouselItem  v-for="(item, index) in marketing.CarouselItems" :key="index">
                <router-link to="/goodsList">
                  <img :src="item">
                </router-link>
            </CarouselItem>
          </Carousel>
        </div>
        <div class="nav-show">
          <div class="nav-show-img" v-for="(item, index) in marketing.activity" :key="index">
            <router-link to="/goodsList">
              <img :src="item">
            </router-link>
          </div>
        </div>
      </div>
<!--    <transition name="fade">-->
<!--      <div class="detail-item-panel panel-1" :duration="{ enter: 100, leave: 100 }" v-show="panel1" @mouseenter="showDetail(1)" ref="itemPanel1" @mouseleave="hideDetail(1)">-->
<!--        <div class="nav-detail-item">-->
<!--          <span v-for="(item, index) in panelData1.navTags" :key="index">{{item}} > </span>-->
<!--        </div>-->
<!--        <ul>-->
<!--          <li v-for="(items, index) in panelData1.classNav" :key="index" class="detail-item-row">-->
<!--            <span class="detail-item-title">{{items.title}}-->
<!--              <span class="glyphicon glyphicon-menu-right"></span>-->
<!--            </span>-->
<!--            <router-link :to="{path: `/`}" v-for="(item, subIndex) in items.tags" :key="subIndex">-->
<!--              <span class="detail-item">{{item}}</span>-->
<!--            </router-link>-->
<!--          </li>-->
<!--        </ul>-->

<!--      </div>-->
<!--    </transition>-->
<!--    <transition name="fade">-->
<!--      <div class="detail-item-panel panel-1" :duration="{ enter: 100, leave: 100 }" v-show="panel2" @mouseenter="showDetail(2)" ref="itemPanel2" @mouseleave="hideDetail(2)">-->
<!--        <ul>-->
<!--          <li v-for="(items, index) in panelData2.classNav" :key="index" class="detail-item-row">-->
<!--            <span class="detail-item-title">{{items.title}}-->
<!--              <span class="glyphicon glyphicon-menu-right"></span>-->
<!--            </span>-->
<!--            <router-link :to="{path: `/`}" v-for="(item, subIndex) in items.tags" :key="subIndex">-->
<!--              <span class="detail-item">{{item}}</span>-->
<!--            </router-link>-->
<!--          </li>-->
<!--        </ul>-->
<!--      </div>-->
<!--    </transition>-->
<!--      <transition name="fade">-->
<!--        <div class="detail-item-panel panel-1" :duration="{ enter: 100, leave: 100 }" v-show="panel3" @mouseenter="showDetail(3)" ref="itemPanel3" @mouseleave="hideDetail(3)">-->
<!--          <ul>-->
<!--            <li v-for="(items, index) in panelData3.classNav" :key="index" class="detail-item-row">-->
<!--            <span class="detail-item-title">{{items.title}}-->
<!--              <span class="glyphicon glyphicon-menu-right"></span>-->
<!--            </span>-->
<!--              <router-link :to="{path: `/`}" v-for="(item, subIndex) in items.tags" :key="subIndex">-->
<!--                <span class="detail-item">{{item}}</span>-->
<!--              </router-link>-->
<!--            </li>-->
<!--          </ul>-->
<!--        </div>-->
<!--      </transition>-->
  </div>
  </div>
</template>

<script>
import store from '@/util/store';
import { mapState } from 'vuex';
import axios from "_axios@0.24.0@axios";
export default {
  name: "NavIndex",
  data () {
    return {
      panel1: false,
      panel2: false,
      panel3:false,
      nav: [
        '游戏本分区',
        '轻薄本分区',
        '笔记本分区',
      ],
      panelData1: {
        classNav: [
          {
            title: '游戏本分区',
            tags: ['拯救者Y7000', '拯救者Y7000P', '拯救者R7000', '拯救者R7000P']
          },

        ],
      },
      panelData2: {
        classNav: [
          {
          title: '轻薄本分区',
          tags: ['小新Pro 16', '小新Air 15', '小新Air 14']
        },
        ]
      },
      panelData3: {
        classNav: [
          {
            title: '便携本分区',
            tags: ['YOGA 14s', 'YOGA 14C', 'YOGA 13s', 'YOGA Pro 14S/C', 'YOGA 16S']
          },
        ],
      },
    };
    },

  computed: {
    ...mapState(['marketing'])
  },
  methods: {
    showDetail (index) {
      if( index === 1 )
        this.panel1 = true;
      else if(index === 2)
        this.panel2 = true;
      else if(index === 3)
        this.panel3 = true;
    },
    hideDetail (index) {
      // index === 1 ? (this.panel1 = true) : (this.panel2 = true);
      if( index === 1 )
        this.panel1 = false;
      else if(index === 2)
        this.panel2 = false;
      else if(index === 3)
        this.panel3 = false;
    }
  },
  mounted () {
    this.$refs.itemPanel1.style.left =
      this.$refs.navSide.offsetLeft + this.$refs.navSide.offsetWidth + 'px';
    this.$refs.itemPanel2.style.left =
      this.$refs.navSide.offsetLeft + this.$refs.navSide.offsetWidth + 'px';
    this.$refs.itemPanel3.style.left =
      this.$refs.navSide.offsetLeft + this.$refs.navSide.offsetWidth + 'px';

    this.$refs.itemPanel1.style.top = this.$refs.navSide.offsetTop + 'px';
    this.$refs.itemPanel2.style.top = this.$refs.navSide.offsetTop + 'px';
    this.$refs.itemPanel3.style.top = this.$refs.navSide.offsetTop + 'px';
  },
  updated () {
    this.$refs.itemPanel1.style.left =
      this.$refs.navSide.offsetLeft + this.$refs.navSide.offsetWidth + 'px';
    this.$refs.itemPanel2.style.left =
      this.$refs.navSide.offsetLeft + this.$refs.navSide.offsetWidth + 'px';
    this.$refs.itemPanel3.style.left =
      this.$refs.navSide.offsetLeft + this.$refs.navSide.offsetWidth + 'px';
    this.$refs.itemPanel1.style.top = this.$refs.navSide.offsetTop + 'px';
    this.$refs.itemPanel2.style.top = this.$refs.navSide.offsetTop + 'px';
    this.$refs.itemPanel3.style.top = this.$refs.navSide.offsetTop + 'px';
  },
  store
}
</script>

<style scoped>
.nav-item {
  width: 680px;
  height: 36px;
  margin: 0px auto;
}
.nav-item ul {
  list-style: none;
  margin-left: 15px;
}
.nav-item li {
  float: left;
  font-size: 16px;
  font-weight: bold;

  margin-left: 30px;
}
.nav-item a {
  text-decoration: none;
  color: #555555;
}
.nav-item a:hover {
  color: #d9534f;
}
/*大的导航信息，包含导航，幻灯片等*/
.nav-body {
  width: 1020px;
  height: 485px;
  margin: 0px auto;
  text-align: center;
}
.nav-side {
  width: 200px;
  height: 100%;
  padding: 0px;
  color: #fff;
  float: left;
  background-color: #6e6568;
}
.nav-side ul {
  width: 100%;
  padding: 0px;
  padding-top: 15px;
  list-style: none;
}
.nav-side li {
  padding: 7.5px;
  padding-left: 15px;
  font-size: 14px;
  line-height: 18px;
}
.nav-side li:hover {
  background: #999395;
}
.nav-side-item:hover {
  cursor: pointer;
  color: #c81623;
}

/*导航内容*/
.nav-content {
  width: 1000px;
  margin-left: 15px;
  overflow: hidden;
  float: left;
}
/*导航图片*/
.nav-show {
  width: 1000px;
  margin-left: 100px;
  overflow: hidden;
  float: left;
}
.nav-show-img {
  margin-top: 10px;
  float: left;
}
.nav-show-img:nth-child(2) {
  margin-left: 20px;
}
/*显示商品*/
.content {
  width: 100%;
}
/*显示商品详细信息*/
.detail-item-panel {
  width: 815px;
  height: 485px;
  background-color: #fff;
  position: absolute;
  top: 168px;
  left: 389px;
  z-index: 999;
}
.nav-detail-item {
  margin-left: 26px;
  margin-top: 15px;
  margin-bottom: 15px;
  cursor: pointer;
  color: #eee;
}
.nav-detail-item span {
  padding: 6px;
  padding-left: 12px;
  margin-left: 15px;
  font-size: 12px;
  background-color: #6e6568;
}
.nav-detail-item span:hover {
  margin-left: 15px;
  background-color: #f44336;
}
.detail-item-panel ul {
  list-style: none;
}
.detail-item-panel li {
  line-height: 38px;
  margin-left: 40px;
}
.detail-item-title {
  padding-right: 6px;
  font-weight: bold;
  font-size: 12px;
  cursor: pointer;
  color: #555555;
}
.detail-item-title:hover {
  color: #d9534f;
}
.detail-item-row a {
  color: #555555;
}
.detail-item{
  font-size: 14px;
  padding-left: 12px;
  padding-right: 8px;
  cursor: pointer;
  border-left: 1px solid #ccc;
}
.detail-item:hover {
  color: #d9534f;
}
</style>
